<template>
  <div class="source-report">
    <!-- 基本信息 -->
    <el-card>
      <div slot="header">基本信息</div>
      <el-row>
        <el-col :span="8">渠道名称：{{ form.name }}</el-col>
        <el-col :span="8">浏览人数：{{ form.pv }}</el-col>
        <el-col :span="8">注册人数：{{ form.uv }}</el-col>
      </el-row>
    </el-card>
    <!-- 图表 -->
    <el-card>
      <div slot="header">用户转化率</div>
      <el-progress type="circle" :percentage="cvr"></el-progress>
    </el-card>
  </div>
</template>

<script>
import sources from '@/assets/db/sources.json'

export default {
  name: 'source-report',
  data() {
    return {
      form: {
        name: '',
        pv: '',
        uv: ''
      }
    }
  },
  computed: {
    // 转化率
    cvr() {
      const { uv, pv } = this.form
      if (!uv || !pv) return 0
      return uv / pv * 100
    }
  },
  methods: {
    // 获取来源信息
    getSource() {
      const id = this.$route.query.id * 1
      this.form = sources.find(v => v.id === id)
    }
  },
  mounted() {
    this.getSource()
  }
}
</script>